<template>
  <!--直播-->
  <div class="block">
    <div class="title">{{ obj.name }}</div>
    <div v-if="defaultMap">
      <div class="img">
        <img :src="defaultMap" height="100%" width="100%"/>
        <div class="cover"></div>
      </div>
      <div class="liveBroadcast">
        <div class="but" v-if="state==0">
          <span>未开始</span>
        </div>
        <div class="but" v-else-if="state==1">
          <span>已结束</span>
        </div>
        <div class="play" v-else-if="state==2||state==3">
          <a :href="'https://live.polyv.cn/watch/'+obj.channelId"></a>
        </div>
      </div>
    </div>
    <div class="mainBody">
      <div class="explain">
        <span class="subtitle" v-if="state==0">未开始</span>
        <span class="subtitle" v-if="state==1">已结束</span>
        <span class="subtitle" v-if="state==2">直播中</span>
        <span class="subtitle" v-else-if="state==3">回放中</span>
        <a :href="'https://live.polyv.cn/watch/'+obj.channelId">
          <button>进入直播间</button>
        </a>
      </div>
      <div class="explain1" v-if="obj.startTime">
        <span>直播时间：{{ obj.startTime }}</span>
      </div>
      <div class="block2">
        <div class="introduce" v-if="obj.speaker||obj.speakerIntroduce">
          <span>|</span>
          <span>讲者介绍</span>
        </div>
        <div class="text">{{ obj.speaker }}</div>
        <div class="text">{{ obj.speakerIntroduce }}</div>
      </div>
      <div class="block2">
        <div class="introduce" v-if="obj.descVr">
          <span>|</span>
          <span>直播介绍</span>
        </div>
        <div class="text">{{ obj.descVr }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import {api, httpGet, httpPost} from "../api/http";

export default {
  data() {
    return {
      //0 未开始   1已结束   2直播中   3回放中
      state: 0,
      defaultMap: '',
      obj: {},
    }
  },
  mounted() {
    this.$store.state.isActive = false
    let parameter = this.GetRequest(window.location.href.split('?')[1]);
    this.GetLive(parameter.channelId)
  },
  methods: {
    //获取url中的参数
    GetRequest() {
      let url = location.search;
      let theRequest = new Object();
      if (url.indexOf("?") != -1) {
        let str = url.substr(1);
        let strs = str.split("&");
        for (let i = 0; i < strs.length; i++) {
          theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
        }
      }
      return theRequest;
    },
    //获取视频参数
    GetLive(channelId) {
      httpPost(api.live_info + channelId, '',).then((res) => {
        if (res.data.code == 200) {
          if (res.data.data.guideImgVr) {
            this.defaultMap = res.data.data.guideImgVr
          } else {
            this.defaultMap = '../../static/img/学术会议.jpg'
          }
          this.obj = res.data.data
        }
      })
      this.GetStatus(channelId)
    },
    //获取直播间状态
    GetStatus(channelId) {
      httpGet(api.live_status + channelId).then((res) => {
        if (res.data.code == 200) {
          if (res.data.data.startTime == 0) {
            this.obj.startTime = ''
          } else {
            this.obj.startTime = this.timestampToTime(res.data.data.startTime)
          }
          if (res.data.data.watchStatusText == '未开始') {
            this.state = 0
          } else if (res.data.data.watchStatusText == '已结束') {
            this.state = 1
          } else if (res.data.data.watchStatusText == '直播中') {
            this.state = 2
          } else if (res.data.data.watchStatusText == '回放中') {
            this.state = 3
          }
        }
      })
    },

    //时间戳转时间
    timestampToTime(time) {
      let date = new Date(time);
      let YY = date.getFullYear() + '-';
      let MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      let DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
      let hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
      let mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
      let ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
      return YY + MM + DD + " " + hh + mm;
    },
  }
}
</script>

<style lang="less" scoped>
.block {
  font-family: PingFangSC;
  margin: 50px 25px;

  .title {
    font-size: 34px;
    font-weight: 800;
    height: 50px;
  }

  .img {
    width: 100%;
    height: 400px;
    margin: 20px 0;

    .cover {
      width: 100%;
      height: 100%;
      background-color: rgba(47, 47, 47, 0.5);
      opacity: 0.5;
      position: relative;
      top: -5.4rem;
    }
  }

  .liveBroadcast {
    .play {
      position: absolute;
      top: 120px;
      width: 700px;
      height: 400px;
      background-image: url("../../static/img/播放.png");
      background-repeat: no-repeat;
      background-size: 100px;
      background-position: center center;

      a {
        width: 100%;
        height: 100%;
        display: inline-block;
      }
    }

    .but {
      width: 700px;
      height: 400px;
      position: absolute;
      top: 120px;
      text-align: center;

      span {
        padding: 20px 35px;
        width: 150px;
        display: inline-block;
        background-color: rgba(255, 255, 255, 0);
        border: 2px rgb(255, 255, 255) solid;
        color: rgb(255, 255, 255);
        border-radius: 4px;
        font-size: 28px;
        line-height: 23px;
        position: relative;
        top: 50%; /*偏移*/
        transform: translateY(-50%);
      }
    }
  }

  .mainBody {
    font-weight: 400;
    font-style: normal;
    line-height: 46px;
    text-decoration: none;

    .explain {
      overflow: hidden;

      span {
        font-size: 24px;
        color: rgb(153, 153, 153);
        margin: 12px 0;
        display: block;
      }

      .subtitle {
        margin-top: 25px;
        font-size: 26px;
        color: rgb(16, 16, 16);
        font-weight: 700;
        float: left;
      }

      a {
        float: right;

        button {
          width: 200px;
          height: 70px;
          z-index: 4;
          background-color: rgb(65, 128, 255);
          border: none;
          color: rgb(255, 255, 255);
          border-radius: 6px;
          font-size: 25px;
          text-align: center;
          font-weight: normal;
          font-style: normal;
          opacity: 1;

        }
      }


    }
    .explain1{
      span {
        font-size: 24px;
        color: rgb(153, 153, 153);
        margin: 12px 0;
        display: block;
      }
    }
    .block2 {
      margin-bottom: 25px;

      .introduce {
        font-size: 25px;
        font-weight: 600;
        color: rgba(65, 128, 255, 1);
      }

      .text {
        font-size: 24px;
        margin-left: 20px;
      }
    }
  }
}
</style>
